<template>
  <div class="report">
    <div class="lianz-header">
      <div class="container">
        <h3 @click="clickpt">享七举报平台</h3>
        <ul>
          <li
            :class="navInd == index?'active':''"
            v-for="(item,index) in nav"
            :key="index"
            @click="handNav(index)"
            style="cursor:pointer"
          >{{item}}</li>
        </ul>
      </div>
    </div>

    <div class="home" v-if="!isreport">
      <h1>廉正举报须知</h1>
      <h3>享七致力于打造公开、透明、开放的商业生态，我们对于任何腐败的行为将予以坚决打击。</h3>
      <h3>享七廉正合规部受理以下涉及员工违纪的举报：</h3>
      <ul>
        <li>（1）索取、收受贿赂；违规收受礼品或款待；</li>
        <li>（2）违规投资、就职于享七供应商、商家、合作伙伴等；</li>
        <li>（3）泄露公司保密信息等；</li>
        <li>（4）利用职权谋取私利；</li>
        <li>（5）其他违反法律法规、公司制度的行为。</li>
      </ul>
      <h3>我们希望您采取实名举报或提供可以联系到您的联系方式，以便专人保持联络，我们承诺会按照专业的做法，严格保护举报人，并对举报内容严格保密。举报内容必须客观真实。对于立案调查并有结论的举报，我们会根据您留下的联系方式进行反馈。</h3>
      <div class="login">
        <button
          type="button"
          :class="reciprocal>0?'buttonh ant-btn ant-btn-ghost':'buttonr ant-btn ant-btn-ghost'"
          @click="handreport"
        >
          <span v-if="reciprocal>0">{{reciprocal}}s后方可进入</span>
          <span v-else>举 报</span>
        </button>
      </div>
      <h4>
        廉正合规部职能只受理符合以上特征的举报，业务问题可以通过
        <a
          href="http://mms.pinduoduo.com/Pdd.html#/inform_center/index"
        >业务投诉</a>
        渠道获得更快的解决。
      </h4>
    </div>

    <div class="lianz-edit" v-if="isreport">
      <div class="rep-info">
        <p>举报信息</p>
        <div class="content">
          <el-form ref="form" :model="form" label-width="100px" class="reportInfo">
            <el-form-item label="举报对象">
              <el-radio-group v-model="form.beau">
                <el-radio label="员工"></el-radio>
                <el-radio label="商家"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="举报主题">
              <el-select v-model="form.theme" placeholder="选择主题">
                <el-option
                  v-for="(item,index) in errs"
                  :key="index"
                  :label="item.label"
                  :value="item.keyvalue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="举报内容">
              <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
            <el-form-item label="添加附件" prop="imgs">
              <!-- <el-input v-model="form.imgs"></el-input> -->
              <el-button>上传附件</el-button>
              <br>
              <span class="tip">最多上传9个文件，每个文件大小不超过10M
                <br>可上传格式为jpg、png、jpeg、doc、xls、xlsx、docx、zip、rar等格式
              </span>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <div class="people-info">
        <p>举报人信息</p>
        <div class="content">
          <el-form ref="form1" :model="form" label-width="100px">
            <el-form-item label="姓名">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="form.mailbox"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="其他联系方式">
              <el-select v-model="form.contact" placeholder="选择方式">
                <el-option label="QQ" value="QQ"></el-option>
                <el-option label="微信" value="WX"></el-option>
              </el-select>
              <el-input v-model="form.contactnum"></el-input>
            </el-form-item>
            <el-form-item label="验证码">
              <el-input v-model="form.code"></el-input>
              <el-button id="verify-img" class="gVerifyNumdiv"></el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <div class="login">
        <button type="button" class="ant-btn ant-btn-primary" @click="handsubmit">
          <span>提 交</span>
        </button>
      </div>
    </div>

    <el-dialog title="添加举报对象" :visible.sync="dialogTableVisible_beau">
      <el-form ref="form" :model="form" label-width="120px" class="reportInfo">
        <el-form-item label="员工姓名／花名">
          <el-input v-model="form.beauname"></el-input>
        </el-form-item>
        <el-form-item label="员工所在部门">
          <el-input v-model="form.department"></el-input>
        </el-form-item>
      </el-form>
      <div class="diabut">
        <el-button size="medium" @click="handbeau(1)">取消</el-button>
        <el-button type="primary" size="medium" @click="handbeau(2)">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加举报商家" :visible.sync="dialogTableVisible_shop">
      <el-form ref="form" :model="form" label-width="140px" class="reportInfo">
        <el-form-item label="公司名称／店铺名称">
          <el-input v-model="form.shopname"></el-input>
        </el-form-item>
        <el-form-item label="相关人员">
          <el-input v-model="form.shopman"></el-input>
        </el-form-item>.
        <el-form-item label="联系方式">
          <el-input v-model="form.shopcontact"></el-input>
        </el-form-item>
      </el-form>
      <div class="diabut">
        <el-button size="medium" @click="handshop(1)">取消</el-button>
        <el-button type="primary" size="medium" @click="handshop(1)">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {gVerify} from "../../../assets/js/gVerify.js"
export default {
  name: "report",
  data() {
    return {
      navInd: 0,
      reciprocal: 10,
      timer: null,
      verifyCode: null,
      isreport: false,
      nav: ["廉正举报", "业务投诉"],
      errs: [
        { id: 0, label: "索取、收受贿赂", keyvalue: "0" },
        { id: 1, label: "违规收受礼品或款待", keyvalue: "1" },
        { id: 2, label: "利用职权谋取私利", keyvalue: "2" },
        {
          id: 3,
          label: "违规投资、就职于享七供应商、商家、合作伙伴等",
          keyvalue: "3"
        },
        { id: 4, label: "泄露公司保密信息", keyvalue: "4" },
        { id: 5, label: "其他违反法律法规、公司制度等行为", keyvalue: "5" }
      ],
      dialogTableVisible_shop: false,
      dialogTableVisible_beau: false,
      form: {
        code: "",
        department: "",
        beauname: "",
        beau: "",
        theme: "",
        desc: "",
        contact: "",
        contactnum: "",
        mailbox: "",
        phone: "",
        imgs: [],
        shopcontact: "",
        shopman: "",
        shopname: ""
      }
    };
  },
  watch: {
    "form.beau": {
      handler: function() {
        if (this.form.beau == "商家") {
          this.dialogTableVisible_shop = true;
        } else if (this.form.beau == "员工") {
          this.dialogTableVisible_beau = true;
        }
      }
    }
  },
  methods: {
    init() {
      window.scrollTo(0, 0);
    },
    //点击平台字样
    clickpt() {
      window.location.reload(); //原页面刷新
    },
    //点击某个nav
    handNav(ind) {
      this.navInd = ind;
    },
    //点击举报按钮
    handreport() {
      const _this = this;
      if (this.reciprocal < 1) {
        this.isreport = true;
        setTimeout(() => {
          _this.verCode();
        }, 1000);
      }
    },
    //点击提交按钮
    handsubmit() {
      // verifyCode.validate('校验的值');
      if (this.verifyCode.validate(this.form.code)) {
        console.log("yes");
      } else {
        console.log("no");
      }
    },
    //商家弹框按钮
    handshop(val) {
      this.dialogTableVisible_shop = false;
      if (val == 1) {
        this.form.beau = "";
      }
    },
    //员工弹框按钮
    handbeau(val) {
      this.dialogTableVisible_beau = false;
      if (val == 1) {
        this.form.beau = "";
      }
    },
    //10秒倒计时
    countdown() {
      const _this = this;
      this.timer = setInterval(() => {
        _this.reciprocal = --_this.reciprocal;
        clearTimeout(this.timer);
        if (_this.reciprocal > 0) {
          _this.countdown();
        }
      }, 1000);
    },
    //生成随机验证码
    verCode() {
      if (document.getElementById("verify-img")) {
        this.verifyCode = new GVerify({
          id: "verify-img", //容器的ID
          type: "number" //图形验证码的类型：blend-数字字母混合类型（默认）、number-纯数字、letter-纯字母
        });
      } else {
        console.log("no dom");
      }
    }
  },
  mounted() {
    this.init();
  },
  created() {
    this.countdown();
  }
};
</script>

<style lang="less" scoped>
.report {
  .lianz-header {
    width: 100%;
    height: 60px;
    background: #ff5d5e;
    display: flex;
    align-items: center;
    .container {
      width: 1200px;
      margin-left: auto;
      margin-right: auto;
      h3 {
        display: inline-block;
        color: #fff;
        font-size: 19px;
        font-weight: 400;
        margin-right: 30px;
        cursor: pointer;
      }
      ul {
        margin-left: 20px;
        display: inline-block;
        color: #fff;
        li {
          display: inline-block;
          padding: 0 10px;
          margin-right: 20px;
          height: 40px;
          font-size: 15px;
          line-height: 40px;
        }
        li.active {
          border-bottom: 4px solid #fff;
        }
      }
    }
  }
  .home {
    background: #fff;
    width: 1200px;
    box-shadow: 0 0 3px;
    margin: 30px auto;
    padding: 50px 80px;
    h1 {
      height: 60px;
      text-align: center;
      color: #ff5454;
      font-size: 23px;
      font-weight: 800;
    }
    h3 {
      margin: 0;
      padding: 0;
      line-height: 28px;
      color: #333;
      font-weight: 400;
      font-size: 15px;
    }
    ul {
      padding: 10px 0;
      list-style: none;
      li {
        font-weight: 800;
        font-size: 14px;
        line-height: 28px;
        color: #333;
      }
    }
    .login {
      text-align: center;
      padding-top: 30px;
      button {
        color: #fff;
        border: #ff5454;
        width: 120px;
        height: 32px;
        font-size: 15px;
        font-weight: 400;
      }
      .buttonh {
        background: rgb(153, 153, 153);
      }
      .buttonr {
        background: #ff5454;
      }
    }
    h4 {
      line-height: 50px;
      color: #999;
      font-weight: 400;
      font-size: 12px;
      text-align: center;
    }
  }
  .lianz-edit {
    width: 1200px;
    margin: auto;
    .rep-info {
      background: #fff;
      width: 100%;
      float: left;
      display: block;
      box-shadow: 0 0 3px;
      margin-top: 30px;
      margin-bottom: 10px;
      .el-select {
        width: 400px;
        .el-input {
          width: 400px;
        }
      }
    }
    .people-info {
      float: left;
      background: #fff;
      width: 100%;
      box-shadow: 0 0 3px;
      margin-bottom: 30px;
    }
    .content {
      float: left;
      width: 100%;
      padding: 20px 50px;
    }
    p {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #d9d9d9;
      font-size: 15px;
      padding-left: 20px;
      font-weight: 800;
      color: #333;
    }
    .reportInfo {
      width: 90%;
    }
    .tip {
      color: #999;
      font-size: 12px;
      line-height: 15px;
      display: block;
    }
    .el-input {
      width: 150px;
    }

    .login {
      text-align: center;
      padding-bottom: 20px;
      .ant-btn {
        display: inline-block;
        margin-bottom: 0;
      }
      .ant-btn > span {
        pointer-events: none;
      }
      button {
        color: #fff;
        background: #ff5454;
        border: #ff5454;
        width: 120px;
        height: 32px;
        font-size: 15px;
        font-weight: 400;
        cursor: pointer;
      }
    }
  }
  .gVerifyNumdiv {
    width: 90px;
    height: 35px;
    padding: 0;
  }
  .el-dialog__body {
    border-top: 1px solid #ebebeb;
    padding: 30px 0px 0px 0px;
    .el-form {
      padding: 0 20px;
      border-bottom: 1px solid #ebebeb;
    }
    .diabut {
      text-align: right;
      padding: 10px 20px;
    }
  }
}
</style>

